<template>
    <a-form class="opt-form" :labelCol="{ flex: '140px', class: 'title' }" :wrapperCol="{ class: 'content' }"
        :model="model" ref="formRef" :rules="rules">
        <h1 :id="props.id">{{ title }}</h1>
        <a-flex class="conf-container" :gutter="8" vertical>
            <a-alert class="error" v-if="errors.length" type="error" showIcon :message="`保存时发生错误：`">
                <template #description>
                    <ul>
                        <li v-for="(v, k) in errors" :key="k">{{ v }}</li>
                    </ul>
                </template>
            </a-alert>
            <a-form-item class="option-item" label="适用项目类型" name="AllowTypes">
                <a-tag color="processing" class="allow-tag" v-for="(v, k) in model.AllowTypes" :key="k">
                    <template #icon>
                        <UnorderedListOutlined />
                    </template>
                    {{ v }}
                </a-tag>
                <template #help>
                    以下配置仅适用于{{ projOpt.ApplyYear }}({{ projOpt.Batch }})批次中上述类型的项目
                </template>
            </a-form-item>
            <a-form-item class="option-item" label="报名开始时间" name="ApplyStart">
                <date-picker v-model:value="model.ApplyStart" format="YYYY-MM-DD HH:mm" showTime />
            </a-form-item>
            <a-form-item class="option-item" label="报名结束时间" name="ApplyEnd">
                <date-picker v-model:value="model.ApplyEnd" format="YYYY-MM-DD HH:mm" showTime />
            </a-form-item>
            <a-form-item class="option-item" label="批次申请限制" name="ApplyEnd">
                <a-input-number v-model:value="model.MaxPerBatch" style="width: 100px;" :min="1"/>
                <template #help>
                    单位：每人每批次。即每人每批次最多只能申请{{ model.MaxPerBatch }}个项目，但参加的项目不限。
                </template>
            </a-form-item>
            <a-form-item class="option-item" label="特例" name="SpecialCases">
                <a-button @click="add" :loading="loading"><a-icon icon="plus-outlined"></a-icon> 添加特例</a-button>
                <table class="case-table table-form">
                    <colgroup>
                        <col width="100px">
                        <col width="100px">
                        <col width="100px">
                        <col width="100px">
                    </colgroup>
                    <thead>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>结束时间</th>
                        <th>操作</th>
                    </thead>
                    <tbody>
                        <tr v-for="(v, k) in model.SpecialCases" :key="k" v-if="model.SpecialCases.length">
                            <td>{{ v.Code }}</td>
                            <td>{{ v.RealName }}</td>
                            <td>{{ v.EndOn }}</td>
                            <td>
                                <a class="a-btn" href="javascript:;" @click="remove(k)">[删除]</a>
                            </td>
                        </tr>
                        <tr v-else>
                            <td colspan="4">暂无数据</td>
                        </tr>
                    </tbody>
                </table>
                <template #help>
                    特例可以无视报名时间限制进行报名。但不能无视批次申请限制。
                </template>
            </a-form-item>
            <a-form-item class="option-item" label=" " :colon="false">
                <a-button type="primary" @click="submit" :loading="loading">提交</a-button>
            </a-form-item>
        </a-flex>
    </a-form>
    <addCase ref="modalRef" />
</template>


<script setup>
import app from '@/app'
import dayjs from 'dayjs'
import { reactive, ref } from 'vue';
import projOpt, { saveOption } from '../ProjectOption'
import { message } from 'ant-design-vue';
import addCase from './add-case.vue';

const props = defineProps({
    title: String,
    modelName: String,
    id: String,
});

const title = props.title;
const model = projOpt[props.modelName];
const rules = reactive({
    ApplyStart: {
        required: true,
        validator(rule, value, cb, source, options) {
            let { promise, resolve, reject } = app.withResolvers();
            const start = dayjs(model.ApplyStart);
            const end = dayjs(model.ApplyEnd);
            if (start >= end) {
                reject("开始时间必须小于结束时间")
            } else {
                resolve();
            }
            return promise;
        }
    },
    ApplyEnd: {
        required: true,
        validator(rule, value, cb, source, options) {
            let { promise, resolve, reject } = app.withResolvers();
            const start = dayjs(model.ApplyStart);
            const end = dayjs(model.ApplyEnd);
            if (start >= end) {
                reject("结束时间必须大于开始时间")
            } else {
                resolve();
            }
            return promise;
        }
    }
});

const now = dayjs();
for (let index in model.SpecialCases) {
    let item = model.SpecialCases[index];
    if (now > dayjs(item.EndOn)) {
        model.SpecialCases.splice(index);
    }
}

const modalRef = ref();
async function add() {
    let result = await modalRef.value.showModal();
    if (result) {
        model.SpecialCases.push(result);
        submit();
    }
}

function remove(i) {
    model.SpecialCases.splice(i, 1);
    submit();
}

const formRef = ref();
const errors = ref([]);
const loading = ref(false);
async function submit() {
    loading.value = true;
    try {
        await formRef.value.validate();
        console.log(model, projOpt)
        saveOption();
        message.success("保存成功");
    } catch {
        loading.value = false;
    } finally {
        loading.value = false;
    }
}
</script>

<style lang="less" scoped>
@import '@/assets/table-form.less';

.case-table {
    margin-top: 8px;
}

.allow-tag {
    line-height: 32px;
    font-size: 14px;
}
</style>../ProjectOption